import {useAppSelector} from "@/store/store.ts";
import ContentLoader from "react-content-loader";

const BoneView = () => {
    const systemState = useAppSelector(state => state.system);
    return (
        <div className={"flex flex-col gap-20 p-20"}>
            <div
                className="flex flex-row items-center pl-4 justify-start border-l-amber-600 border-solid  border-l-4 h-10 text-white text-2xl font-bold gap-2">
                <p>参考链接: </p> <a className={"text-blue-600"}
                                     href={"https://skeletonreact.com/"}>https://skeletonreact.com/</a>
            </div>
            <div className="flex flex-row gap-10">
                {Array.from(Array(4).keys()).map(() => <ContentLoader
                    speed={2}
                    width={400}
                    height={160}
                    viewBox="0 0 400 160"
                    backgroundColor={systemState.theme == "dark" ? "white" : "black"}
                    foregroundColor={systemState.theme == "dark" ? "#000" : "#ecebeb"}
                >
                    <rect x="100" y="46" rx="3" ry="3" width="52" height="6"/>
                    <rect x="100" y="28" rx="3" ry="3" width="88" height="6"/>

                    <rect x="0" y="86" rx="3" ry="3" width="410" height="6"/>
                    <rect x="0" y="102" rx="3" ry="3" width="380" height="6"/>
                    <rect x="0" y="118" rx="3" ry="3" width="178" height="6"/>


                    <circle cx="40" cy="40" r="30"/>
                </ContentLoader>)}
            </div>

            <ContentLoader
                speed={2}
                width={400}
                height={160}
                viewBox="0 0 400 160"
                backgroundColor={systemState.theme == "dark" ? "white" : "black"}
                foregroundColor={systemState.theme == "dark" ? "#000" : "#ecebeb"}
            >
                <circle cx="10" cy="20" r="8"/>
                <rect x="25" y="15" rx="5" ry="5" width="220" height="10"/>
                <circle cx="10" cy="50" r="8"/>
                <rect x="25" y="45" rx="5" ry="5" width="220" height="10"/>
                <circle cx="10" cy="80" r="8"/>
                <rect x="25" y="75" rx="5" ry="5" width="220" height="10"/>
                <circle cx="10" cy="110" r="8"/>
                <rect x="25" y="105" rx="5" ry="5" width="220" height="10"/>
            </ContentLoader>

        </div>
    );
};

export default BoneView;
